<template>
	<div class="newsdetail pt5">
		<header-nav></header-nav>
		<h1 class="news-title pl5 pr5">{{ title }}</h1>
		<div class="news-titother mt5 mb5 pl5 pr5 tc">
			<span class="tit-source">来源：<i>{{ socues }}</i></span>
			<span class="tit-data">时间：{{ time }}</span>
		</div>
		<div class="newscontent mt4 pl5 pr5">
			<div class="content-wrap" v-html="newscontent">
				
			</div>
		</div>
		
		<news-rec v-on:plink="changelink"></news-rec>
	</div>
</template>

<script>
	import axios from 'axios'
	import HeaderNav from '../../components/header.vue'
	import NewsRec from '../../views/index/newsrec.vue'
	export default{
		components : {
			HeaderNav,
			NewsRec
		},
		data(){
			return{
				newsdata:[],
				title:'',
				newsurl:'',
				socues:'',
				time:'',
				newsimage:'',
				newscontent:'',
				newsdata:''
			}
		},
		mounted: function(){
		    document.getElementsByTagName("body")[0].className="bgfff"
		    let url = '/api/644-1';
			let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
			this.newsurl = this.$route.query.id
			axios({
				method: 'post',
				url: url,
				params: {
					'showapi_appid':'54164',
			    	'showapi_sign':sign,
			    	'url':this.newsurl
				}
			}).then((res) => {
				console.log(res.data.showapi_res_body)
				this.newsdata = res.data.showapi_res_body
				this.title = res.data.showapi_res_body.title
				this.socues = res.data.showapi_res_body.laiyuan
				this.time = res.data.showapi_res_body.shijian
				this.newsimage = res.data.showapi_res_body.pic
				this.newscontent = res.data.showapi_res_body.neirong
			}) 
			
		},
		methods:{
			changelink(data){
				let url = '/api/644-1';
				let sign = 'bc41dbe15d504543b791fe0cc5a80e50';
				this.newsurl = data
				axios({
					method: 'post',
					url: url,
					params: {
						'showapi_appid':'54164',
				    	'showapi_sign':sign,
				    	'url':this.newsurl
					}
				}).then((res) => {
					console.log(res.data.showapi_res_body)
					this.newsdata = res.data.showapi_res_body
					this.title = res.data.showapi_res_body.title
					this.socues = res.data.showapi_res_body.laiyuan
					this.time = res.data.showapi_res_body.shijian
					this.newsimage = res.data.showapi_res_body.pic
					this.newscontent = res.data.showapi_res_body.neirong
				}) 
				document.documentElement.scrollTop = 0
			}
		},
		beforeDestroy () {
		    document.getElementsByTagName("body")[0].className="";
		}
	}
</script>

<style scoped>
	.newsdetail{}
	.newsdetail .news-title{color: #000;font-size: 22px;line-height: 1.45rem;font-weight: 600;}
	.news-titother{font-size: .5rem;}
	.news-titother .tit-source{display: inline-block; }
	.news-titother .tit-data{color: #888888;display: inline-block; margin: 0 .4rem;}
	.news-titother .tit-source i{color: #519aed;}
	.news-images img,.newscontent img{max-width: 100%;}
	.newscontent{position: relative;overflow: hidden;clear: both;padding-bottom: 24px;}
	.content-wrap{line-height: 1.2rem; font-size: .68rem;}
	.content-wrap p{margin: .5rem 0;}
	.content-wrap img{max-width: 100%;}
	.content-wrap p img{text-align: center;}
</style>